<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true" class="nav-custom">
			<!-- <block slot="backText">返回</block> -->
			<block slot="content">
				<text class="fs26"> 检查表清单</text>
			</block>
		</cu-custom>
		<view class="table-warn-content" :style="{ height: appHeight + 'px' }">
			<view class="fs26 title-box mt30">
				<text>检查类型:</text>
				<text class="ml20 fs26">{{ typeObj[itemData.missionType] }}</text>
			</view>
			<view class="fs26 title-box">
				<text>检查地区:</text>
				<text class="ml20 fs26">{{ itemData.areaName }}</text>
			</view>
			<view class="fs26 title-box mb30">
				<text>检查日期:</text>
				<text class="ml20 fs26">{{ itemData.createTime }}</text>
			</view>

			<u-collapse ref="collapse" class="item-box-list">
				<u-collapse-item
					:disabled="item.isPracticable"
					v-for="(item, index) in itemData.inspectProject"
					:key="index"
					class="item-collapse"
					:style="{
						background: item.isPracticable ? '#E4F2FF' : '#FFE9E9'
					}"
				>
					<template slot="title-all">
						<view
							class="col-box"
							:style="{
								background: item.isPracticable ? '#E4F2FF' : '#FFE9E9'
							}"
						>
							<view
								class="list-sin flex-cc"
								:style="{
									color: item.isPracticable ? '#5E5E5E' : '#FF6060'
								}"
							>
								<i
									class="iconfont icon-a-jiancha11 ml20 fw600"
									style="font-size: 39rpx"
									:style="{
										color: item.isPracticable ? '#41A4FF' : '#FF6060'
									}"
								></i>
								<text class="flex-vc ml20" style="text-align: left"> {{ item.title }}</text>
							</view>
							<view class="list-sin flex-cc" style="width: 80rpx">
								<i
									class="iconfont icon-a-jiancha1"
									:style="{
										color: item.isPracticable ? '#41A4FF' : '#FF6060'
									}"
								></i>
							</view>
						</view>
					</template>
					<view class="body-cont">
						<view class="cont-sin">
							<view class="cont-sin-title">存在问题:</view>
							<view class="cont-sin-view">{{ item.problem }}</view>
						</view>
						<view class="cont-sin">
							<view class="cont-sin-title">整改要求:</view>
							<view class="cont-sin-view">{{ item.rectification }}</view>
						</view>
						<view class="cont-sin">
							<view class="cont-sin-title">整改时限:</view>
							<view class="cont-sin-view">{{ item.rectificationTime }}</view>
						</view>
						<view class="cont-sin">
							<view class="cont-sin-title">照片:</view>
							<view class="cont-sin-view">
								<fileShow :files="item.fileUrls"></fileShow>
							</view>
						</view>
					</view>
				</u-collapse-item>
			</u-collapse>

			<view class="submit-btn" @click="submit">预览安全检查表</view>
		</view>
	</view>
</template>
<script>
	export default {
		name: 'previewTable',
		components: {
			fileShow: () => import('@/components/decision/events/cpn/fileShow.vue')
		},
		props: {
			data: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
				appHeight: 0,
				itemData: {
					deleteFlag: 'NOT_DELETE',
					createTime: '2023-05-26 15:08:42',
					createUser: '-1',
					updateTime: null,
					updateUser: null,
					id: '1661992739873067010',
					missionType: 1,
					areaName: '列西街道',
					areaCode: '350404002000',
					inspectProject: [
						{
							title: '自动雨水情监测站点及预警设施设备运行及使用维护是否正常',
							content: '124',
							isPracticable: false,
							problem: '444',
							rectification: '222',
							rectificationTime: '12313',
							fileUrl: '',
							fileUrls: null
						},
						{
							title: '县级监测预警平台软硬件运行及使用维护是否正常',
							content: '',
							isPracticable: true,
							problem: '',
							rectification: '',
							rectificationTime: '',
							fileUrl: '',
							fileUrls: null
						},
						{
							title: '雨水情监测站点和平台网络等通讯费用是否缴纳',
							content: '',
							isPracticable: true,
							problem: '',
							rectification: '',
							rectificationTime: '',
							fileUrl: '',
							fileUrls: null
						},
						{
							title: '各级操作应用人员对山洪灾害监测预警系统是否熟练掌握',
							content: '',
							isPracticable: true,
							problem: '',
							rectification: '',
							rectificationTime: '',
							fileUrl: '',
							fileUrls: null
						},
						{
							title: '是否开展山洪灾害隐患点的排查更新',
							content: '',
							isPracticable: true,
							problem: '',
							rectification: '',
							rectificationTime: '',
							fileUrl: '',
							fileUrls: null
						},
						{
							title: '山洪灾害监测预警责任是否落实',
							content: '',
							isPracticable: true,
							problem: '',
							rectification: '',
							rectificationTime: '',
							fileUrl: '',
							fileUrls: null
						},
						{
							title: '是否存在影响小溪小河及沟道行洪的各类安全隐患',
							content: '',
							isPracticable: true,
							problem: '',
							rectification: '',
							rectificationTime: '',
							fileUrl: '',
							fileUrls: null
						}
					]
				},
				typeObj: {
					1: '县级山洪灾害隐患排查表',
					2: '在建水利工程安全度汛检查表'
				}
			}
		},
		// onLoad(options) {
		// 	let data = JSON.parse(decodeURIComponent(options.data))
		// 	this.itemData = data
		// },
		computed: {},
		async mounted() {
			this.appHeight = await this.$getHeight('.nav-custom')
			this.data.inspectProject = JSON.parse(this.data.inspectProject)
			this.itemData = this.data
			this.$nextTick(() => {
				setTimeout(() => {
					this.$refs.collapse.init()
				}, 500)
			})
			console.info(`this.itemData:`, this.itemData)
		},
		methods: {
			submit() {
				uni.navigateTo({
					url:
						'/pages-subPackages/security/previewPdf?id=' +
						this.itemData.id +
						'&missionType=' +
						this.itemData.missionType
				})
			}
		}
	}
</script>
<style lang="less" scoped>
	.table-warn-content {
		width: 100%;
		padding: 0 24rpx;
		.title-box {
			display: flex;
			align-items: center;
			padding: 10rpx 15rpx;
		}
		.col-box {
			background: #f5f5f5;
			font-size: 26rpx;
			width: 100%;
			padding-right: 10rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 80rpx;
			.list-sin {
				// flex: 1;
				text-align: center;
			}
			// border-bottom: 1rpx solid rgba(0, 0, 0, 0.071);
		}
		/deep/.u-collapse-head {
			padding: 0 0;
			margin: 10rpx 0;
		}
		.body-cont {
			width: 100%;
			font-size: 26rpx;
			border-top: 2rpx solid rgba(96, 117, 137, 0.121);
			border-bottom: 2rpx solid rgba(96, 117, 137, 0.12);
			padding: 0 20rpx;

			.cont-sin {
				width: 100%;
				display: flex;
				margin: 10rpx 0;
				.cont-sin-title {
					width: 120rpx;
					text-align: right;
					color: #666;
				}
				.cont-sin-view {
					margin-left: 25rpx;
					flex: 1;
					color: #000;
				}
			}
		}
		.submit-btn {
			width: 636rpx;
			height: 80rpx;
			background: #41a4ff;
			backdrop-filter: blur(15rpx);
			/* Note: backdrop-filter has minimal browser support */

			border-radius: 20rpx;
			display: flex;
			align-items: center;
			font-weight: 600;
			justify-content: center;
			font-size: 30rpx;
			color: #ffffff;
			margin: 100rpx auto;
		}
	}
</style>
